<template>
  <div class="app-container">
    <div class="search-container">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="关键字" prop="keywords">
          <el-input
            v-model="queryParams.keywords"
            placeholder="请输入关键字"
            clearable
            style="width: 200px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">
            <i-ep-search />
            搜索
          </el-button>
          <el-button @click="resetQuery">
            <i-ep-refresh />
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-card shadow="never">
      <template #header>
        <div class="flex justify-between">
          <div>
            <el-button v-hasPerm="['sys:flow:add']" type="success" @click="openDialog()">
              <i-ep-plus />
              新增
            </el-button>
          </div>
        </div>
      </template>

      <el-table v-loading="loading" :data="tableList" highlight-current-row border>
        <el-table-column type="expand" style="display: flex; margin: auto">
          <template #default="scope">
            <el-table
              :data="scope.row.flowEngineDtos"
              style="width: 80%; display: flex; margin: auto"
              highlight-current-row
              stripe
              align="center"
              border
            >
              <el-table-column label="步骤编码" prop="code" align="center" />
              <el-table-column label="步骤名称" prop="name" align="center" />
              <el-table-column label="步骤执行顺序" prop="sort" align="center" />
            </el-table>
          </template>
        </el-table-column>
        <el-table-column key="code" label="流程编码" align="center" prop="code" width="" />
        <el-table-column key="name" label="流程名称" align="center" prop="name" width=""> </el-table-column>
        <el-table-column key="createTime" label="创建时间" width="200" align="center" prop="createTime" />
        <el-table-column label="操作" fixed="right" :width="mobile === 'mobile' ? 100 : 220">
          <template #default="scope">
            <el-button v-hasPerm="['sys:flow:edit']" type="primary" link size="small" @click="openDialog(scope.row.id)">
              <i-ep-edit />
              编辑
            </el-button>
            <el-button
              v-hasPerm="['sys:flowengine:edit', 'sys:flowengine:add']"
              type="success"
              link
              size="small"
              @click="openSetStep(scope.row)"
            >
              <i-ep-switch />
              步骤设置
            </el-button>
            <el-button
              v-hasPerm="['sys:flow:delete']"
              type="primary"
              link
              size="small"
              @click="handleDelete(scope.row.id)"
            >
              <i-ep-delete />
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="queryParams.pageIndex"
        v-model:limit="queryParams.pageSize"
        @pagination="handleQuery"
      />
    </el-card>

    <!-- 新增/修改弹窗 -->
    <addForm
      v-if="dialogAddOrEdit.visible"
      :dialog-add-or-edit="dialogAddOrEdit"
      class="system"
      :style="{ '--mobileAddFormHeight': mobile === 'mobile' ? screenHeight - 117 + 'px' : 'auto' }"
      @send-close="sendClose"
    ></addForm>

    <!--	设置流程步骤	-->
    <SetStep
      v-if="dialogSetStep.visible"
      ref="setStep"
      :dialog-set-step="dialogSetStep"
      class="system"
      :style="{ '--mobileAddFormHeight': mobile === 'mobile' ? screenHeight - 117 + 'px' : 'auto' }"
      @send-set-step-close="sendSetStepClose"
    ></SetStep>
  </div>
</template>

<script lang="ts">
export default {
  name: "Process",
};
</script>

<script lang="ts" setup>
import { ref, reactive, computed } from "vue";
import addForm from "@/views/system/process/addForm.vue";
import SetStep from "@/views/system/process/SetStep.vue";
import { FlowDataListForm, ParamsType } from "@/api/system/process/types";
import { getFlowDataList, deleteFlow } from "@/api/system/process/index.ts";

import { useScreen } from "@/store/modules/screen";

const screenStore = useScreen();
const mobile = computed(() => screenStore.device);
const screenHeight = computed(() => screenStore.screenHeight);

function initScreen() {}

const total = ref(0);
const loading = ref(false);
const queryFormRef = ref(ElForm);
const tableList = ref<FlowDataListForm[]>();
const queryParams = reactive<ParamsType>({
  pageIndex: 1,
  pageSize: 20,
});

const dialogAddOrEdit = reactive<DialogOption>({
  visible: false,
  title: "新增流程",
  footBtn: "新增",
});

const dialogSetStep = reactive<DialogOption>({
  visible: false,
  title: "流程步骤设置",
  footBtn: "提交",
});

/* 列表查询 */
async function handleQuery() {
  let list = await getFlowDataList(queryParams);
  if (list.type === 0) {
    if (list.success) {
      tableList.value = list.data.list;

      queryParams.pageIndex = list.data.pageNum;
      queryParams.pageSize = list.data.pageSize;
      total.value = list.data.total;
    } else {
      ElMessage.error(list.msg);
    }
  } else {
    ElMessage.error(list.msg);
  }
}

/* 删除 */
async function handleDelete(id) {
  let confirm = await ElMessageBox.confirm("确认删除?", "删除提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => true)
    .catch(() => false);
  if (!confirm) {
    ElMessage({
      type: "info",
      message: "已取消！",
    });
    return;
  }
  let delInfo = await deleteFlow(id);
  if (delInfo.type === 0) {
    if (delInfo.success) {
      ElMessage.success(delInfo.msg);
      resetQuery();
    } else {
      ElMessage.error(delInfo.msg);
    }
  } else {
    ElMessage.error(delInfo.msg);
  }
}

/**
 * 重置查询
 */
function resetQuery() {
  queryFormRef.value.resetFields();
  queryParams.pageIndex = 1;
  queryParams.pageSize = 20;
  handleQuery();
}

/* 新增/编辑 */
function openDialog(id) {
  dialogAddOrEdit.visible = true;
  if (id) {
    dialogAddOrEdit.title = "修改流程";
    dialogAddOrEdit.footBtn = "修改";
    dialogAddOrEdit.id = id;
  } else {
    dialogAddOrEdit.id = 0;
    dialogAddOrEdit.title = "新增流程";
    dialogAddOrEdit.footBtn = "新增";
  }
}

/* 设置流程 */
function openSetStep(row) {
  dialogSetStep.visible = true;
  dialogSetStep.title = "流程步骤设置";
  dialogSetStep.footBtn = "提交";
  dialogSetStep.id = row.id;
  dialogSetStep.code = row.code;
  dialogSetStep.name = row.name;
}

/* 关闭弹窗并刷新列表 */
function sendClose(query) {
  dialogAddOrEdit.visible = false;
  if (query) {
    handleQuery();
  }
}

/* 关闭弹窗并刷新列表 */
function sendSetStepClose(query) {
  dialogSetStep.visible = false;
  if (query) {
    handleQuery();
  }
}

onMounted(() => {
  initScreen();

  handleQuery();
});
</script>

<style lang="less" scoped></style>
